<template>
	<view class="centair">
		<view class="top">
			<view :class="[rotate? 'top-up go' : 'top-up aa']"   @click="togglePopup('middle-img')">
				<image class="image" src="../../static/beijing.png" mode="" ></image>
				<view :class="[rotate? ' go' : ' aa']">
					<view class="iconfont icon-qizi"    v-if="rotate === true" ></view>
					<view class="iconfont icon-qianbi" style="color: #666666;"  v-else></view>
					<text class="text " v-if="rotate === false" style="color: #666666;">今日已签</text>
					<text class="text " v-else>立即签到</text>
				</view>
			</view>
			<view class="top-down">坚持每天签到可以获得多重奖励哦</view>
		</view>
		<view class="mid" >
			<view class="mid-up" :class="[item.state? 'top-up go' : 'top-up aa']" v-for="(item,index) in navList" :key="item.day" >
				<view class="iconfont icon-u9 "></view>
				<view class="mid-down" :class="[item.state? 'top-up go' : 'top-up aa']" >第{{item.day}}天</view>
			</view>
			
		</view>
		<uni-popup :show="type === 'middle-img'" position="middle" mode="insert"  button-mode="right" @hidePopup="togglePopup('')">
				<view class="uni-margin-wrap">
					<swiper class="swiper" circular="true" >
						<swiper-item class="swiper-item">
							<view class="swiper-title">签到成功</view>
							<view class="swiper-top">
								<text class="text3">已成功签到：</text>
								<text class="text4">{{curryIndex}}</text>
								<text class="text3">天 </text>
							</view>
							<view class="iconfont icon-u10"></view>  
							<view class="swiper-buttom">
								<text class="text">获得积分：</text><text class="text1">+{{navList[curryIndex-1].grow}}</text>
								<!-- <text class="text">获得积分</text><text class="text1">+{{navList[curryIndex].youB}}</text> -->
								<view v-if="curryIndex<8">
									<text  class="text2">再连续签到</text><text class="text1">{{8-curryIndex}}</text><text class="text2">天可获得额外奖励哦！</text>
								</view>
								<view v-else>
									<text  class="text2">恭喜你获得额外奖励</text><text class="text1">{{growAwardExtra}}</text><text class="text2">积分</text>
								</view>
							</view>
						</swiper-item >
					</swiper>
					<view class="yticon icon-fork badge" @click="togglePopup('')"></view>
				</view>
		</uni-popup>
		<view class="buttom">
			<view class="buttom-up">
				<view class="iconfont icon-tanhao"></view>
				<view class="">温馨提示</view>
			</view>
			<view class="buttom-down">
				<text >每日签到可获得{{navList[curryIndex-1].grow}}积分的奖励，连续完成8天签到可额外获得奖励，漏签或连续签到满8天后将会重置签到记录。</text>
			</view>
		</view>
		
	</view>
 
</template>
<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
export default {
	components: {
		uniPopup
	},
	data () {
		return {
			rotate:true,
			type : '',
			curryIndex: 1,
			growAwardExtra:0,//额外奖励
			signRecord:[],
			navList: [{
					day: 1,
					grow: 5,
					youB: 5,
					state: false,
				},
				{
					day: 2,
					grow: 10,
					youB: 10,
					state: false,
				},
				{
					day: 3,
					grow: 15,
					youB: 15,
					state: false,
				},
				{
					day: 4,
					grow: 20,
					youB: 20,
					state: false,
				},
				{
					day: 5,
					grow: 25,
					youB: 25,
					state: false,
				},
				{
					day: 6,
					grow: 30,
					youB: 30,
					state: false,
				},
				{
					day: 7,
					grow: 35,
					youB: 35,
					state: false,
				},
				{
					day: 8,
					grow: 40,
					youB: 40,
					state: false,
				},
				
			],
		}
		},
	onLoad(){
		this.loadData();
	uni.startPullDownRefresh();
	},
	onPullDownRefresh() {
		console.log('refresh');
		setTimeout(function () {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	methods: {
		loadData(){
			this.$http.post("/user/querySignAward",{
				SIGNATURE:uni.getStorageSync("SIGNATURE"),
				TOKEN:uni.getStorageSync('userInfo').TOKEN,
			}).then(res=>{
				
				if(res.data.STATE==='0' && res.statusCode===200){
					if(res.data.OBJECT.ISSIGN===1){
						this.rotate=false;
						this.curryIndex=res.data.OBJECT.SIGNSUM;
						this.navList.map(item => {
							  if(item.day<=this.curryIndex){
								  item.state=true
							  }
						});
					}else{
						this.curryIndex=res.data.OBJECT.SIGNSUM+1;
						this.navList.map(item => {
							  if(item.day<this.curryIndex){
								  item.state=true
							  }
						});
					}
					this.growAwardExtra=res.data.OBJECT.SPPOINTAWARDEXTRA;
					this.navList.map(item => {
						  item.grow=res.data.OBJECT.SPPOINTAWARD;
					});
					
				}
			}).catch(err=>{
				console.log('request fail',err);
			})
		},
		  togglePopup(type) {
			if(this.rotate&&type!==''){
				this.$http.post("/user/sign",{
					SIGNATURE:uni.getStorageSync("SIGNATURE"),
					TOKEN:uni.getStorageSync('userInfo').TOKEN,
				}).then(res=>{
					if(res.data.STATE == '903'||res.data.STATE == '904'){
						uni.navigateTo({
							url:'/pages/public/login1'
						})
					}
					if(res.data.STATE==='0' && res.statusCode===200){
						this.type = type;
					}
				}).catch(err=>{
					console.log('request fail',err);
				})
			}
			if(type===''){
				this.type = type;
				this.navList[this.curryIndex-1].state = true;
				this.rotate = false;
				this.loadData();
			}
		  },
	  }
}
</script>
<style lang="scss" scoped>
    .aa{
        transition:  2s;
    }
    .go{
        transform:rotateY(-180deg);
        transition:  2s;
    }
	.iconfont{
		width: 60upx;
		font-size: 60upx;
	}
	.centair{
		background-color: #F5F5F5;
	}
	.uni-margin-wrap {
		background-color: #fff;
		border: 2upx solid #9D9D9D;
		border-bottom-left-radius: 5%;
		border-bottom-right-radius: 5%;
		width: 550upx;
		height: 600upx;
		margin-top: 280upx;
	}
	.swiper{
		height: 700upx;
	}
	.swiper-item {
		text-align: center;
		.swiper-title{
			background-color: #E02E24;
			padding: 40upx;
			font-size: 40upx;
			font-weight: 900;
			color: #fff;
		}
		.swiper-top{
			padding-top: 30upx;
			.text3{
				color: #929292;
				font-size: 30upx;
			}
			.text4{
				color: #DD524D;
				font-size: 60upx;
			}
		}
		.iconfont{
			font-size: 200upx;
			color: #898989;
			padding-left: 180upx;
			margin-top: -20upx;
		}
		.swiper-buttom{
			font-size: 30upx;
			margin: 20upx 0upx;
			.text1{
				color: #DD524D;
			}
			.text{
				color: #929292;
			}
			.text2{
				color: #666666;
			}
		}
		
	}
	.badge{
		position:absolute;
		top: 300upx;
		right: 30upx;
		color: #fff;
		font-size: 50upx;
	}
	
	
	.buttom{
		margin: 0upx 30upx;
		margin-top: 40upx;
		padding-bottom: 40upx;
		.buttom-up{
			display: flex;
			font-size: 20upx;
			color: #9D9D9D;
			padding-bottom: 10upx;
			.iconfont{
				color: #9d9d9d;
				font-size: 35upx;
				padding-left: 10upx;
			}
		}
		.buttom-down{
			font-size: 20upx;
			color: #9D9D9D;
		}
	}
	
	.mid{
		display: flex;
		flex-wrap: wrap; 
		padding: 40upx 30upx;
		border: 2upx solid #D9D9D9;
		background-color: #fff;
		.mid-up{
			
			margin: 20upx 10upx;
			border-radius: 8%;
			width: 22%;
			height: 210upx;
			background-color: #CCCCCC;
			.iconfont{
				color: #fff;
				margin: 35upx 40upx;
			}
			.mid-down{
				background-color: #EEEEEE;
				text-align: center;
				font-size: 25upx;
				padding: 24upx 0upx;
				border-bottom-right-radius: 15%;
				border-bottom-left-radius: 15%;
			}
			&.go{
				background-color: #E02E24;
			}
		}
		
	}
	.top{
		background-color: #E02E24;
		height: 470upx;
		.top-up{
			.image{
				max-width: 200upx;
				max-height: 200upx;
				margin-top: 100upx;
				margin-left: 280upx;
			}
			.iconfont{
				position: relative;
				font-size: 60upx;
				max-width: 50upx;
				color: #E02E24;
				text-align: center;
				margin-left: 345upx;
				margin-top: -165upx;
			}
			.text{
				position: relative;
				font-size: 30upx;
				padding-left: 315upx;
				color: #E02E24;
			}
			
		}
		.top-down{
			font-size: 30upx;
			text-align: center;
			color: #fff;
			margin-top: 90upx;
		}
	}
</style>